<template>
  <div>
    <!--    <h1>用户管理</h1>-->
    <el-table
        class="usertabel" :data="tableData" style="width: 100%">
      <el-table-column
          prop="username"
          label="姓名"
          width="180">
      </el-table-column>

      <el-table-column
          prop="email"
          label="邮箱"
          width="180">
      </el-table-column>

      <el-table-column
          prop="status"
          label="权限"
          width="180">
      </el-table-column>

      <el-table-column
          prop="lastLogin"
          label="最近登录"
          width="180">
      </el-table-column>

      <el-table-column
          prop="created"
          label="注册时间">
      </el-table-column>

      <el-table-column
          align="right"
          label="操作">
        <template slot-scope="scope">
          <el-popconfirm
              @confirm="handleStatus(scope.row.id)"
              title="确定对其进行权限更改？"
          >
            <el-button v-if="scope.row.status == 0"
                       size="mini"
                       type="danger"
                       slot="reference">停用
            </el-button>
            <el-button v-if="scope.row.status == 1"
                       size="mini"
                       type="primary"
                       slot="reference">启用
            </el-button>
          </el-popconfirm>
        </template>

      </el-table-column>

    </el-table>

    <!--分页组件-->
    <!--关键属性：
      current-page
      page-size
      total
      点击分页的事件：@current-change
      -->
    <el-pagination class="mpage"
                   background
                   layout="prev, pager, next"
                   :current-page="currentPage"
                   :page-size="pageSize"
                   :total="total"
                   @current-change=page>
    </el-pagination>

  </div>
</template>

<script>
export default {
  name: "userManage",
  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: 0,
      pageSize: 15
    }
  },
  methods: {
    //分页功能 接收当前页数参数
    page(currentPage) {
      const _this = this
      _this.$axios.get("/user/list?currentPage=" + currentPage).then(res => {
        console.log('结果测试' + res)
        //这里json数据 不是直接的res.data.data 因为还包括了分页数等等
        _this.tableData = res.data.data.records
        _this.currentPage = res.data.data.current
        _this.total = res.data.data.total
        _this.pageSize = res.data.data.size

      })
    },

    handleStatus(id) {
      console.log(id);

      this.$axios("/user/changeUserStatue?id=" + id).then(res => {
        //刷新
        this.page(this.currentPage);
      })


    },

  },
  created() {
    //钩子函数 初始化就赋值为1
    this.page(1)
  }

}
</script>

<style scoped>

.mpage {
  margin: 0 auto;
  text-align: center;
}
</style>